<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-30">
			<u-form>
				<u-form-item required label="上传酒局照片（请上传横版合照）" label-position="top">
					<view class="u-flex upload_box u-m-t-20" @click="uploadImage()">
						<image class="image_box" :src="teaPhoto" mode="aspectFit" v-if="teaPhoto"></image>
						<u-icon name="plus" size="80" color="#000" v-else></u-icon>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<Bottom :isTwice="true" :rightText="confirmText" @confirm="confirm"></Bottom>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import env from '@/network/env.js'
	import {
		teaUploadPhone
	} from '@/network/tea.js'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				action: `${env.baseUrl}/api/uploadOssImage`,
				tea_id: 0,
				teaPhoto: '',
				teaStatus: 0,
				photoStatus: 0, // 0 未上传过  1 已上传过
				confirmText: '保存合照',
				
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			this.tea_id = data.id
			this.teaStatus = data.teaStatus
			if(data.image){
				this.photoStatus = 1
				this.teaPhoto = data.image
				this.confirmText = '确定'
			}
		},
		methods: {
			uploadImage() {
				if(this.photoStatus == 0){
					const _this = this
					uni.chooseImage({
						sizeType: ['original', 'compressed'],
						sourceType: ['camera','album'],
						success: function(res) {
							uni.showLoading({
								title: "上传中"
							})
							const tempFilePath = res.tempFilePaths[0]
							uni.uploadFile({
								url: `${_this.action}`,
								filePath: tempFilePath,
								name: 'file',
								success: (uploadRes) => {
									_this.teaPhoto = JSON.parse(uploadRes.data).data.url
									uni.hideLoading()
								}
							});
						}
					})
				}
			},
			confirm() {
				if(this.photoStatus == 1){
					uni.navigateBack({
						delta: 1,
						success() {
							uni.$emit('update', {
								msg: '页面更新'
							})
						}
					})
				}else{
					if (this.teaPhoto) {
						const params = {
							tea_id: this.tea_id,
							user_id: uni.getStorageSync("user_id"),
							images: this.teaPhoto
						}
						teaUploadPhone(params).then(res => {
							uni.navigateBack({
								delta: 1,
								success() {
									uni.$emit('update', {
										msg: '页面更新'
									})
								}
							})
						})
					} else {
						uni.showToast({
							title: "请上传合照",
							icon: "none"
						})
					}
				}
			}
		}
	}
</script>

<style scoped>
	::v-deep .u-list-item {
		background: #fff !important;
	}

	.upload_box {
		width: 100%;
		height: 350rpx;
		justify-content: center;
		background: #fff;
		border-radius: 20rpx;
	}

	.image_box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		border-radius: 20rpx;
	}
</style>